<template>
  <div class="p-6 h-full w-full bg-gray-600 overflow-auto">
    <!-- 设计面板 -->
    <div :class="pageSettings.drawSettings.classArr" :style="pageStyle">
      <VueDraggable
        class="h-full w-full"
        v-model="designCompList"
        :animation="150"
        group="people"
        ghostClass="ghost"
      >
        <template v-for="(item, idx) in designCompList" :key="item.id">
          <RenderComp v-model="designCompList[idx]"></RenderComp>
        </template>
      </VueDraggable>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component as VueComp } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { OneDivLayoutComp } from './layout-components/index'
import { useDesignerStore } from '@/stores/designerStore'
import { storeToRefs } from 'pinia'
import { buildBaseConfigStyle } from '@/utils/DesignCompUtil'

const allMap = new Map<string, VueComp>()
allMap.set('OneDivLayoutComp', OneDivLayoutComp)

const designerStore = useDesignerStore()
const { designCompList, pageSettings } = storeToRefs(designerStore)

const pageStyle = computed(() => {
  const drawSettings = pageSettings.value.drawSettings
  return buildBaseConfigStyle(drawSettings)
})
</script>

<style scoped></style>
